<template>
    <div class="goreap">
    <!-- <el-dialog title="" width="90%" height="80%"> -->
        <div>
            <el-descriptions title="采收计划详情" direction="vertical" :column="4" border>
                <el-descriptions-item label="序号" width="150">{{ data.place }}</el-descriptions-item>
                <el-descriptions-item label="地块名称" width="150">{{ data.place }}</el-descriptions-item>
                <el-descriptions-item label="地块作物" width="150">{{ data.food }}</el-descriptions-item>
                <el-descriptions-item label="采收人" width="150">{{ data.secondRequest }}</el-descriptions-item>
                <el-descriptions-item label="一级果（公斤）" width="150">{{ data.third }}</el-descriptions-item>
                <el-descriptions-item label="二级果（公斤）" width="150">{{ data.thirdtRequest }}</el-descriptions-item>
                <el-descriptions-item label="三级果（公斤）" width="150">{{ data.common }}</el-descriptions-item>
                <el-descriptions-item label="通货" width="150"></el-descriptions-item>
            </el-descriptions>
        </div>
        <h3>本次采收量</h3>
        <el-form :model="data" label-width="120px" ref="ruleFormRef" style="margin-left:250px ;">
            <el-form-item label="采摘批次" >
                <el-input v-model="data.batch":disabled="true" style="width: 350px;" />
            </el-form-item>
            <el-form-item label="选择地块" style="width: 350px;">
                <el-select v-model="data.place" placeholder="地块1 " label-width="100px" clearable>
                    <el-option label="地块1" value="地块1" />
                    <el-option label="地块2" value="地块2" />
                </el-select>
            </el-form-item>
             <el-form-item label="采收作物" style="width: 350px;">
                <el-select v-model="data.food" placeholder="柑橘（冰糖桔） " label-width="100px" clearable>
                    <el-option label="柑橘（冰糖橘）" value="柑橘（冰糖橘）" />
                    <el-option label="玉米" value="玉米" />
                    <el-option label="高粱" value="高粱" />
                    <el-option label="水稻" value="水稻" />
                </el-select>
            </el-form-item>
            <el-form-item label="采收人" style="width: 350px;">
                <el-select v-model="data.people" placeholder="王浩" clearable>
                    <el-option label="王浩" value="王浩" />
                    <el-option label="张山" value="张山" />
                </el-select>
            </el-form-item>
            <el-form-item label="采收时间" style="width: 350px;">
                <el-date-picker v-model="data.times" type="date" placeholder="请选择" clearable />
            </el-form-item>
            <el-form-item label="计划采摘量">
                <el-input v-model="data.weight" style="width: 350px;"/>
            </el-form-item>
            <el-form-item label="一级果（公斤）">
                <el-input v-model="data.first"style="width: 350px;" />
            </el-form-item>
            <el-form-item label="二级果（公斤）">
                <el-input v-model="data.second" style="width: 350px;"/>
            </el-form-item>
            <el-form-item label="三级果（公斤）">
                <el-input v-model="data.third" style="width: 350px;"/>
            </el-form-item>
            <el-form-item label="通货（公斤）">
                <el-input v-model="data.common" style="width: 350px;"/>
            </el-form-item>
            <el-form-item>
                <el-button  @click="(router.push({name:'harvest'}))"> 取消 </el-button>
                <el-button type="primary" @click="submitHandler">确认</el-button>
            </el-form-item>
        </el-form>
    <!-- </el-dialog> -->
     </div>
</template>

<script lang='ts' setup>
import router from '@/router';
import { reactive, ref, watch, type ModelRef } from 'vue';
const props = defineProps(["data"])
const select = ref()
const tableData = ref({
    times:"",
    people: "",
    place: '',
    first: '',
    second: "",
    third: "",
    common: ""
})

const submitHandler = () => {
    router.push({name:'harvest'})
     if(props.data){
        if(typeof(props.data.times) !== 'string'){
            props.data.times=(props.data.times as Date).toLocaleDateString().replace(/\//g,'.')
        }
        
    }
}
const close2Handler=()=>{
   router.push({name:'harvest'})
}
</script>

<style lang='scss' scoped>
.example-showcase .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: flex;
    align-items: center;
}
.goreap{
    width: 100%;
    height: 152%;
    background: white;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}
</style>